<!-- eslint-disable no-console -->
<script lang="ts" setup>
import type { VxeGridProps } from '#/adapter/vxe-table';
import type { QcindexApi } from '#/api';

import { reactive, ref } from 'vue';

import { useVbenModal } from '@vben/common-ui';

import { message } from 'ant-design-vue';

import { useVbenForm } from '#/adapter/form';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getTeamList } from '#/api';

// console.log(measureAll);

const mes_index_type = ref();
const [Modal, modalApi] = useVbenModal({
  closeOnClickModal: false,
  onOpenChange(isOpen: boolean) {
    if (isOpen) {
      const data = modalApi.getData();
      console.log(data);

      mes_index_type.value = data;
    }
  },
  onConfirm() {
    // console.log(gridApi1.grid.getRadioRecord());
    if (gridApi1.grid.getRadioRecord() === null) {
      message.warning('未选择检测项！');
    } else {
      modalApi.setData(gridApi1.grid.getRadioRecord());
      modalApi.close();
    }
  },
});

const [BaseForm] = useVbenForm({
  // 所有表单项共用，可单独在表单内覆盖
  commonConfig: {
    // 所有表单项
    componentProps: {
      class: 'w-full',
    },
  },
  handleSubmit: onSubmit,
  layout: 'horizontal',
  schema: [
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入班组编号',
      },
      fieldName: 'teamCode',
      label: '班组编号',
      formItemClass: 'col-span-6',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入班组名称',
      },
      fieldName: 'teamName',
      label: '班组名称',
      formItemClass: 'col-span-6',
    },
  ],
  submitButtonOptions: {
    content: '查询',
  },
  wrapperClass: 'grid-cols-6 md:grid-cols-12',
});

const gridOptions1 = reactive<VxeGridProps<QcindexApi.Row>>({
  checkboxConfig: {
    highlight: true,
    labelField: 'name',
  },
  columns: [
    {
      align: 'left',
      field: 'teamId',
      title: '',
      type: 'radio',
      width: 50,
    },
    { field: 'teamCode', title: '班组编号' },
    { field: 'teamName', title: '班组名称' },
    { field: 'remark', title: '备注' },
  ],
  keepSource: true,
  pagerConfig: {},
  proxyConfig: {
    ajax: {
      query: async ({ page }, formValues) => {
        const res = await getTeamList({
          pageNum: page.currentPage,
          pageSize: page.pageSize,
          ...formValues,
        });
        return {
          total: res.total,
          items: res.rows,
        };
      },
    },
  },
});

// 获取弹框中检测项表格
const [Grid1, gridApi1] = useVbenVxeGrid({
  gridOptions: gridOptions1,
});

function onSubmit(values: Record<string, any>) {
  console.log(values);
  gridApi1.query(values);
  // message.success({
  //   content: `form values: ${JSON.stringify(values)}`,
  // });
}
</script>
<template>
  <Modal class="w-5/6" title="班组选择">
    <BaseForm />
    <Grid1 />
  </Modal>
</template>
